<template>
    <h1>vue使用的设计模式是：MVVM 另外两个框架使用的模式是：mvc</h1>
    <div>
        <!--V-model 语法 v-model='属性名'-->
        <span>姓名：</span> {{ name }}
        <input type="text" v-model="name"><br>
        <span>密码：</span> {{ pwd }}
        <input type="password" v-model="pwd">
    </div>
    <div>
        <span>你的家乡是哪里：</span> {{ city }}
        <select v-model="city">
            <option value="开封">开封</option>
            <option value="周口">周口</option>
            <option value="信阳">信阳</option>
        </select><br>
        <span>爱好：</span> {{ hobby }}
        <input type="checkbox" v-model="hobby" value="篮球">篮球
        <input type="checkbox" v-model="hobby" value="王者">王者
        <input type="checkbox" v-model="hobby" value="逻辑猜">逻辑猜
    </div>
    <span>自我介绍：</span> {{ instr }}
    <textarea v-model="instr"></textarea>
    <hr>
    <span>
        个人名言：
    </span>{{ instr }}
    <input type="text" v-model.trim="instr">
    <input type="text" v-model.number="instr">
    <input type="text" v-model.lazy="instr">
</template>

<script setup>
import { ref } from 'vue'
const name = ref('叶辰仙逆')
const pwd = ref('123456')
const city = ref('周口')
const hobby = ref([])
const instr = ref('')
</script>

<style scoped>

</style>